Over the course of the next few lessons will be taking an in-depth look at the browser window module.
This, of course, being the module with which will create renderer processes or windows for our app.
Now, we've already covered some of this when looking at the structure of an electron.
But to reiterate, let's step through this in a bit more detail.
Inside of our create window function, we assign to this global variable main window a new instance
of electrons browser window for which we require the module from electron.
Here we configure this browser window with a couple of parameters setting its width to 1000 pixels and
its height to 800.
And we tell Electron that we do want to know Duchesse integrated into this renderer process by setting
node integration to true on the browser Windows Web contents, this web preference parameter being for
configuration options on the web content.
Another topic will cover in detail later this giving us access to know doges from our browser windows,
things like using, require, etc..
Then once we have a new browser window or renderer, we can load some HTML into that chromium window
calling load file with the HTML file to load index dot html.
Another important point here in both the documentation and older examples you'll see indexed on HDMI
loaded with the load Eurail method instead.
This again is outdated and lowed file is the correct way for newer versions of Electron.
But we'll see an example of this in a second, then open the dev tools of that web content in the browser
window with open dev tools.
That's being for development only, of course.
And finally register a listener for when this window is closed to unset the browser window instance.
OK, on the subject of load, file versus load you URL, let's see the difference.
When loading content into a browser window, we use load file for any content local to our app.
For example, this indexed HTML file, there's simply checking for a file in the current directory.
But keep in mind that this browser window instance is essentially a chromium browser window.
So we are by no means limited to loading content from local files.
In earlier versions of Electron, we would have used load your URL, parsing a file path with the file
protocol, meaning that method still exists for the purposes of loading URLs, not files.
Let's see an example.
We don't need dev tools, so comment out.
I'll duplicate this comment about the load file version and instead call load you rl loading over http
s Google dot com save.
I'll start the app with the watch command.
Takes a second as the content is being downloaded and there HDMI from Google dot com loads into our
main window.
So simple enough, but as you probably noticed, loading remote content isn't all that graceful and
should be avoided wherever possible.
We want our desktop apps to be fast, so local files is definitely the way to go, avoiding the initial
blank window whilst the content is loaded.
That said, we still get some of this blank screen flicker when loading a local file.
I'll change this back to load file for indexed HTML.
And now immediately, as I save Main, which will reload the app, I'll switch over to the app so we
can see it appear and look for that flicker of a blank window save.
Their index, HDMI, is loaded almost instantly, but we definitely do get to see a somewhat nasty flicker,
this will, of course, not be a problem for every app, but in case of a full color interface like
this, it will be noticeable.
Again, the aim here is to make our electronic feel like native apps.
So this should be handled more gracefully back in the docs.
We have a small section on doing just this showing window gracefully with two ways of achieving this.
First, we can use the browser windows ready to show event hiding the window until all of its content
is loaded.
Let's see this back to mind.
Start by setting the browser window to be hidden, initially passing a new configuration parameter when
it gets created show false meaning.
We won't be able to see the window.
Then add a new listener on this browser window.
Instant's main window on ready to show.
But seeing as this event will only ever fire once, the better alternative would be to listen once just
telling know to discard this listener after it's been triggered, saving a bit of a memory, and as
this event callback will pass it mine window dot show.
So call the show method on main window.
When there's fires all manually, go to the app before it launches again to better observe this save.
And they're still a very slight flicker, but that has more to do with the success being processed than
the content being loaded.
The downside of this first option to show the window gracefully is that it can delay the perceived launch
of the app a bit.
So as a simpler alternative, we have a second option, changing the color of that initially empty window.
I'll get rid of this listener.
And instead of the window hidden initially, I'll set its background color.
To the same main color used in the content save.
And this time, we can't see any trace of a white flicker as the actual content loaded in seamlessly
over that blue background, so two different approaches based on what will work better for your app.
Next up, we'll see how to create multiple windows and set them up as parent child configurations.